import echarts from 'echarts'
import '../../../public/static/theme/chalk'
import chinaJson from '../../../public/static/map/china.json'
import { getProvinceMapInfo } from '@/utils/map_utils'
import axios from 'axios'

// 初始化图表
export function setEchartOptions(ref, options) {
  const echartsInstance = echarts.init(ref, 'chalk')
  echartsInstance.setOption(options)
  echartsInstance.on('click', (arg) => {
    const provinceInfo = getProvinceMapInfo(arg.name)
    axios.get('http://localhost:8082/' + provinceInfo.path).then((res) => {
      console.log(res.data)
      console.log(arg)
      echarts.registerMap(provinceInfo.key, res.data)
      echartsInstance.setOption({
        series: [],
        geo: {
          type: 'map',
          //   roam: 'scale', 缩放拖动， scale , move ,true
          map: provinceInfo.key,
          itemStyle: {
            areaColor: '#2E72BF',
            borderColor: '#333'
          }
        }
      })
    })
  })
}

export const setEcharts = (ref, seriesData = {}) => {
  const series = seriesData.map((item) => {
    //   散点图 渲染在矢量地图上面
    return {
      type: 'effectScatter',
      rippleEffect: {
        scale: 5,
        brushType: 'stroke'
      },

      name: item.name,
      data: item.children,
      //   该参数是必须的,不然散点图会设法渲染在坐标轴上
      coordinateSystem: 'geo'
    }
  })
  echarts.registerMap('chinaMap', chinaJson)
  setEchartOptions(ref, {
    title: {
      text: '▍商家分布',
      top: '10%',
      left: '5%'
    },
    grid: {
      top: '20%',
      left: '10%',
      bottom: '15%'
    },
    legend: {
      show: true,
      orient: 'vertical',
      top: '70%',
      left: '10%',
      //   height: 300,
      itemGap: 10
    },
    geo: {
      type: 'map',
      //   roam: 'scale', 缩放拖动， scale , move ,true
      map: 'chinaMap',
      itemStyle: {
        areaColor: '#2E72BF',
        borderColor: '#333'
      }
    },
    series: series
  })
}
